import React, { PureComponent,Fragment } from "react";
import { connect } from "dva";
import { Row, Col, Upload, Spin, Card, Form, Button, Timeline } from "antd";
import Acceptance from "./Acceptance";
import styles from '../../Pbulic.less';



@connect(({ inspection, global }) => ({
  baseUrl:global.baseUrl,
  dictionaries:global.dictionaries,
  detaildata:inspection.detaildata,
  processData:inspection.processData,
  loading:inspection.loading.detailinfo,
  loadingsubmit:inspection.loading.model_submit,
}))
export default class DetailInfo extends PureComponent {
  constructor(props) {
    super(props);
    this.detailInfoId = this.props.match.params.id && this.props.match.params.id!='detail' ? this.props.match.params.id : 0;
  }

  componentDidMount() {
    const {dispatch} = this.props;
    dispatch({
      type: "inspection/fetch_inspection_info",
      payload: {
        inspectId: this.detailInfoId
      }
    })
    .then(()=>{
      const inspectId=this.props.detaildata.inspectId;
      dispatch({
        type: "inspection/fetch_inspection_handle",
        payload: {
          inspectId,
        }
      })
    })
  }

  renderTimeline() {
    const { detaildata, processData, dispatch, loadingsubmit, baseUrl  } = this.props;

    const inspectStatus = detaildata.status;
    const lastStatus = processData && processData.length>0 ? processData[0].eventStatus : 0;
    const result_arr=[];

    processData && processData.length>0 && processData.forEach((item) => {
      if((item.eventStatus!=="01" && item.eventStatus!=="03" && item.eventStatus!=="04" ) ||
        (item.eventStatus === "03" && inspectStatus===lastStatus && lastStatus===item.eventStatus) ||
        (item.eventStatus === "04" && inspectStatus===lastStatus && lastStatus===item.eventStatus)
      ){
        result_arr.push (<Timeline.Item key={item.statusEventId}
          // color={item.inspectStatus == "03" && item.handleResult=="0" ? 'red' : item.inspectStatus == "04"  ? 'green' : 'blue'}
        >
          <Acceptance
            // 状态审核中时，如果不是最顶层节点，则以结果输出
            status={item.eventStatus}
            isRole={false}
            data={item}
            inspectStatus={inspectStatus}
            lastStatus={lastStatus}
            inspectId={detaildata.inspectId}
            dispatch={dispatch}
            loadingsubmit={loadingsubmit}
            baseUrl={baseUrl}
          />
        </Timeline.Item>)
      }
    })

    return result_arr

  }

  render() {
    const { detaildata, dictionaries, loading, processData, dispatch, loadingsubmit, baseUrl  } = this.props;

    const inspectProject = dictionaries.inspectProject && dictionaries.inspectProject.length>0
      ? dictionaries.inspectProject.map(item=>item.label)
      :[];

    const inspectStatus = dictionaries.inspectStatus && dictionaries.inspectStatus.length>0
      ? dictionaries.inspectStatus.map(item=>item.label)
      :[];


    return (
      <Fragment>
        {loading && <div className={"globalSpin"}><Spin spinning={loading}  /></div>}
        {
          !loading && detaildata && detaildata.inspectId &&
          <Fragment>
          <Card bodyStyle={{padding:30}} className={styles.info_inner_card_timeline}>
            <Timeline>
              {this.renderTimeline()}



              <Timeline.Item>
                <Acceptance
                            status={"01"}
                            isRole={false}
                            data={detaildata}
                            inspectStatus={inspectStatus}
                            inspectProject={inspectProject}
                            inspectId={detaildata.inspectId}
                            dispatch={dispatch}
                            loadingsubmit={loadingsubmit}
                            baseUrl={baseUrl}
                />
              </Timeline.Item>
            </Timeline>



          </Card>
          </Fragment>
        }
      </Fragment>
    );
  }
}
